<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<title>Document</title>

</head>
<body>
	<div id="wrap">
		<div class="register">
			<section class="email">
	            
	           <section class="address nike_section">
	            	<label><b>*</b>用户名</label>
	                <input placeholder="用户名由汉字字母数字下划线组成" id="unike1" class="unike" check="0">
	                <span class="right"></span>
	                <span class="warn warn_nike"></span>
	          </section>
	            
	            <!--fault错误状态，correct正确状态-->
	            <section class="address email_section ">
	            	<label><b>*</b>邮箱地址</label>
	                <input placeholder="请输入您的邮箱地址" id="email" value="">
	                <span class="right"></span>
	                <span class="warn warn_email">邮箱格式不正确</span>
	            </section>
	            <section class="password e_password_section">
	                <label><b>*</b>密码</label>
	                <input type="password" placeholder="请输入密码" maxlength="16" id="e_password">
	                <span class="right"></span>
	                <span class="warn warn_e_password">密码不能为空</span>
	                <span>请输入6-16个包含数字、字母或下划线</span>
	                
	                <div class="clear"></div>
	            </section>
	            <section class="repeat e_repassword_section">
	                <label><b>*</b>确认密码</label>
	                <input type="password" placeholder="请再次输入密码" id="e_repassword">
	                <span class="right"></span>
	                <span class="warn warn_e_repassword">两次密码不一致，请重新输入</span>
	            </section>           
	            <span class="btn-green emailregister" id="email_reg_post">注册</span>
	        </section>
        </div>
	</div>
	<style>
	html,body{height: 100%;padding: 0;margin: 0;}
	body{
		font-size: 14px/40px;color: #666;
		width: 100%;
		background: linear-gradient(top,#3f536e 10%,#846f5a 75%,#4a403f 100%);
		background: -moz-linear-gradient(top,#3f536e 10%,#846f5a 75%,#4a403f 100%);
		background: -webkit-linear-gradient(top,#3f536e 10%,#846f5a 75%,#4a403f 100%);
		background: -o-linear-gradient(top,#3f536e 10%,#846f5a 75%,#4a403f 100%);
		background: -ms-linear-gradient(top,#3f536e 10%,#846f5a 75%,#4a403f 100%);
		overflow: hidden;
	}
	#wrap{margin-top: 200px;}

	.clear{ clear:both;}

	#wrap >div > section{ width:598px; min-height:300px; border:1px solid #dadada; background-color:rgba(255,255,255,.8); margin:auto; padding-bottom:30px; box-shadow:0 0 10px rgba(0,0,0,.1);}
	#wrap >div > section .btn-green{ display:block; font:14px/40px "微软雅黑";height:40px; text-align:center; margin:30px auto 0; width:150px; background-color:#89ba00; border-radius:4px; color:#fff; cursor:pointer;}
	#wrap >div > section .btn-green:hover{ background-color:#7da900;}
	#wrap >div > section .btn-orange{ display:inline-block; font:14px/32px "微软雅黑";height:32px; width:90px;text-align:center;background-color:#ff8e16; border-radius:4px; color:#fff; cursor:pointer; margin-left:12px;}
	#wrap >div > section .btn-orange:hover{ background-color:#f77400}
	#wrap >div > section .btn-disable{display:inline-block; font:14px/32px "微软雅黑";height:32px; width:90px;text-align:center;background-color:#ffb36f; border-radius:4px; color:#fff;margin-left:12px; cursor:default;}
	#wrap >div > section h2{ height:24px;font:20px/24px "微软雅黑"; padding-left:32px; display:inline-block; margin-top:30px; margin-bottom:25px; background:url(../Image/act/icon-sad.png) no-repeat left center;}
	#wrap >div > section h2.red{ color:#ec6941;}
	#wrap >div > section h2.green{ color:#89ba00;}
	#wrap >div > section p{ font:14px/26px "宋体"; color:#666; text-indent:28px; display:block; width:385px; text-align:left;}
	#wrap section.email_ok > section >span,
	#wrap section.email_success > section >span,
	#wrap section.email_error > section >span,
	#wrap section.email_outtime > section >span{ font:14px/26px "宋体"; color:#666;display:block; width:385px;}
	#wrap section.email_ok > section >p >a{ color:#f77400;}



	#wrap section.email_ok > section,
	#wrap section.email_success > section,
	#wrap section.email_error > section,
	#wrap section.email_outtime > section{ width:385px; margin:0 auto; padding:0; text-align:center;}

	div >  section >section{ padding:0 20px; margin-left:129px;}
	section >label{color:#666; font-size:14px; display:block; line-height:40px;}
	section >label > b{ color:#ec6941;}
	section > input{ height:38px; width:259px; padding-left:38px; border:1px solid #dadada; background:#fff url(img/register-user.png) no-repeat 13px center; text-indent:10px;}
	section.password > input,
	section.again > input{ background-image:url(img/register-password.png);}
	section.password > span:nth-of-type(3){ display:block; font:12px/20px "宋体"; color:#999;margin-left:50px}
	section.repeat > input{ background-image:url(img/register-password.png);}

	section > span.right{ display:none; background:url(img/icon_right.png) no-repeat center; height:17px; width:17px; margin-bottom:-2px;}
	section > span.warn{ display:none; height:40px; font:12px/40px "宋体"; color:#999;color:#ec6941; width:96px;  float:right; margin-right:26px;}
	section.correct > span.right{display:inline-block}
	section.fault > span.warn{ display:table-cell;}
	section.repeat > span.warn{ line-height:20px}

	.register >section >span{ display:block; margin-left:149px; font:12px/14px "宋体"; color:#999;}
	
	
	
	
	
	</style>
	<script type="text/javascript" src="jquery.js"></script>
	<script>
		$(function(){
			//用户名验证
		    $('.unike').change(function(){
		       var nike=$(this).val();
		       var $this=$(this);
		        checkuname(nike,$this);
		    });
		   
		   //用户名验证 
		   function checkuname(nike,$this){
		       
		       if(/^(?!_)(?!.*?_$)[a-zA-Z0-9_\u4e00-\u9fa5]+$/.test(nike)){     //只含有汉字、数字、字母、下划线不能以下划线开头和结尾：
		           if(nike.length > 15){
		                $this.siblings('.warn_nike').html('用户名太长'); 
		                $this.parent('.nike_section').addClass("fault").removeClass("correct");  
		                $this.attr('check',0);
		               return false;
		           }

		           if(nike.length < 3){
		                $this.siblings('.warn_nike').html('用户名太短'); 
		                $this.parent('.nike_section').addClass("fault").removeClass("correct"); 
		                $this.attr('check',0);
		                return false;
		           }
		           $.post('/register/getuname',{uname:nike},function(data){
		                if(data == 'ok'){
		                    $this.siblings('.warn_nike').html('');
		                    $this.parent('.nike_section').addClass("correct").removeClass("fault");  
		                      $this.attr('check',1);
		                    return true;
		                }else{
		                    $this.siblings('.warn_nike').html('用户名重复');
		                    $this.parent('.nike_section').addClass("fault").removeClass("correct");  
		                    $this.attr('check',0);
		                    return false;
		                }
		            });
		       }else{
		           
		            $this.siblings('.warn_nike').html('用户名错误');
		            $this.parent('.nike_section').addClass("fault").removeClass("correct");  
		            return false;
		      }
		   }
			// 验证密码
		    $("#password").change(function() {
		        var password = $("#password").val();
		        var number = /^[0-9,]*$/;
		        var letter = /^[a-zA-Z,]*$/;
		        var re_number = new RegExp(number);
		        var re_letter = new RegExp(letter);

		        if ((re_letter.test(password) || re_number.test(password))) {
		            $(".warn_password").html('格式错误');
					$(".password_section").addClass("fault").removeClass("correct");
		        } else {
		            if (password.length < 6 || password.length > 16) {
		                $(".warn_password").html('格式错误');
						$(".password_section").addClass("fault").removeClass("correct");
		            } else {
		                $(".password_section").addClass("correct").removeClass("fault");
		                // 密码正确时同事检测确认密码
		                var repassword = $("#repassword").val();
		                // 确认密码正确时，设置确认密码状态
		                if (password == repassword) {
		                    $(".repassword_section").addClass("correct").removeClass("fault");
		                }
		            }
		        }
		    });

		    // 验证重复密码
		    $("#repassword").change(function() {
		        var repassword = $("#repassword").val();
		        var password = $("#password").val();

		        var number = /^[0-9,]*$/;
		        var letter = /^[a-zA-Z,]*$/;
		        var re_number = new RegExp(number);
		        var re_letter = new RegExp(letter);

		        if (password != repassword || ((re_letter.test(password) || re_number.test(password)) || (password.length < 6 || password.length > 16))) {
		            $(".warn_repassword").html('两次密码不一致，请重新输入');
					$(".repassword_section").addClass("fault").removeClass("correct");
		        } else {
		            $(".repassword_section").addClass("correct").removeClass("fault");
		        }
		    });

		    ///////////////////////////邮箱在注册///////////////////////////////
		    $("#email").change(function() {
		        var email = $("#email").val();
		        var reg = /^([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+@([a-zA-Z0-9]+[_|\_|\.]?)*[a-zA-Z0-9]+\.[a-zA-Z]{2,3}$/;
		        if (!reg.test(email)) {
		            $(".warn_email").html('邮箱地址格式不正确');
					$(".email_section").addClass("fault").removeClass("correct");
		        } else {
		            $.ajax({
		                type: 'POST',
		                url: '/register/getEmail',
		                dataType: "html",
		                data: ({email: email}),
		                success: function(res) {
		                    if (res == "ok") {
		                        $(".email_section").addClass("correct").removeClass("fault");
		                    } else if (res == "exits") {
		                        $(".warn_email").html('邮箱地址已存在');
								$(".email_section").addClass("fault").removeClass("correct");
		                    } else if (res == "invalid") {
		                        $(".warn_email").html('邮箱地址格式不正确');
								$(".email_section").addClass("fault").removeClass("correct");
		                    }
		                }
		            });
		        }
		    });

		    // 验证密码
		    $("#e_password").change(function() {
		        var password = $("#e_password").val();
		        var number = /^[0-9,]*$/;
		        var letter = /^[a-zA-Z,]*$/;
		        var re_number = new RegExp(number);
		        var re_letter = new RegExp(letter);


		        if ((re_letter.test(password) || re_number.test(password))) {
		            $(".warn_e_password").html('格式错误');
					$(".e_password_section").addClass("fault").removeClass("correct");
		        } else {
		            if (password.length < 6 || password.length > 16) {
						$(".warn_e_password").html('密码长度错误');
						$(".e_password_section").addClass("fault").removeClass("correct");
		            } else {
		                $(".e_password_section").addClass("correct").removeClass("fault");

		                // 密码正确时同事检测确认密码
		                var repassword = $("#e_repassword").val();
		                // 确认密码正确时，设置确认密码状态
		                if (password == repassword) {
		                    $(".e_repassword_section").addClass("correct").removeClass("fault");
		                }


		            }
		        }


		    });

		    // 验证重复密码
		    $("#e_repassword").change(function() {
		        var repassword = $("#e_repassword").val();
		        var password = $("#e_password").val();

		        var number = /^[0-9,]*$/;
		        var letter = /^[a-zA-Z,]*$/;
		        var re_number = new RegExp(number);
		        var re_letter = new RegExp(letter);

		        if (password != repassword) {
					$(".warn_e_repassword").html('两次密码输入不一致');
					$(".e_repassword_section").addClass("fault").removeClass("correct");
		        } else {
		            $(".e_repassword_section").addClass("correct").removeClass("fault");
		        }
		    });
		})
	</script>
</body>
</html>